<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Let's Gridster</title>

    <link rel="stylesheet" type="text/css" href="gridster/jquery.gridster.min.css"/>

    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="gridster/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="gridster/jquery.gridster.with-extras.min.js"></script>

    <style type="text/css">
        .gs-w {
            background-color: #DDD;
            overflow-x: auto;
            overflow-y: auto;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("ul").gridster({
                widget_margins: [5, 5],
                widget_base_dimensions: [100, 100],
                resize: {
                    enabled: true
                }
            });
        })
    </script>
</head>
<body>
<div class="gridster">
    <ul style="width: 100%; height: 100%">
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
            <form>
                <table>
                    <tr>
                        <td>Username:</td>
                        <td>
                            <input type="text" name="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td>
                            <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" value="Login"/>
                        </td>
                    </tr>
                </table>
            </form>
        </li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
            <a href="masonry.html"><h1>Go to Masonry</h1></a>
        </li>
        <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
            <p>
                例：widget_base_dimensions: [150, 150]
                那么每个元素块的宽/高分别为150px/150px
                注：元素块合并时的宽度并不只是两个元素块之和
                即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
                高度={data-sizey=”1″}=元素块X1==150*1=150px
            </p>
        </li>
        <li data-row="2" data-col="1" data-sizex="3" data-sizey="3">
            <form>
                <table>
                    <tr>
                        <td>Username:</td>
                        <td>
                            <input type="text" name="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td>
                            <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" value="Login"/>
                        </td>
                    </tr>
                </table>
            </form>
        </li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="3">
            <a href="vgrid.html"><h1>Go to VGrid</h1></a>
        </li>
        <li data-row="3" data-col="1" data-sizex="3" data-sizey="3">
            <p>
                例：widget_base_dimensions: [150, 150]
                那么每个元素块的宽/高分别为150px/150px
                注：元素块合并时的宽度并不只是两个元素块之和
                即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px
                高度={data-sizey=”1″}=元素块X1==150*1=150px
            </p>
        </li>
        <li data-row="3" data-col="2" data-sizex="3" data-sizey="3">
            <form>
                <table>
                    <tr>
                        <td>Username:</td>
                        <td>
                            <input type="text" name="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td>
                            <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" value="Login"/>
                        </td>
                    </tr>
                </table>
            </form>
        </li>
        <li data-row="3" data-col="3" data-sizex="3" data-sizey="3">
            <a href="divs.html"><h1>Go to DIVS</h1></a>
        </li>
    </ul>
</div>
</body>
</html>